<template>
  <div id="map" class="map">
    <div id="overViewMap"></div>
    <div id="mouse-position"></div>
<!--    <layerChange></layerChange>-->
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from '@vue/reactivity'
import "ol/ol.css";
import Map from "ol/Map";
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile";
import ImageLayer from 'ol/layer/Image';
import {Raster as RasterSource} from 'ol/source';
import XYZ from "ol/source/XYZ";
import View from "ol/View";
import Control from 'ol/control/Control';
import {defaults as defaultControls, ZoomSlider,OverviewMap,ScaleLine,MousePosition} from "ol/control";
//图层管理器组件
import LayerChange from '../components/LayerManage.vue'
import gcjMecator from '../store/gaodemapmodify.js'
import {getVEC_CLayer,getCVA_CLayer} from '../store/tiandituLayers.js'


export default {
  data(){
    return{
      raster:null,
      layer:null
    };

  },

  mounted() {
    this.initMap();

  },
  components:{
    LayerChange,
  },
/*  setup(){
    const map = shallowRef(null);
    return{
      map,
    }
  },*/
  methods: {
     initMap() {
       this.$store.state.map=new Map({
        layers: [
          new TileLayer({
            title:"高德卫星图",
            source:new XYZ({
              name:'高德卫星图',
              projection:gcjMecator,
              url:'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
              wrapX:false
            }),
            visible:false

          }),
          new TileLayer({
            title:"高德地图",
            source: new XYZ({
              wrapX: true,
              name:"高德地图",
              projection:gcjMecator,
              url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
            }),
            visible:false
          }),
            /*蓝色天地图底图与标注*/
          getVEC_CLayer(),
          getCVA_CLayer(),
            //注释原来的天地图底图
          /*new TileLayer({
            title: "天地图",
            source: new XYZ({
              name: "天地图",
              url: "http://t0.tianditu.com/DataServer?T=vec_w&tk=4697d231b5655bf4aa67a04221da58d9&x={x}&y={y}&l={z}",
              wrapX: true
            })
          }),*/
         /* new TileLayer({
            title: "天地图标注",
            source: new XYZ({
              name: "天地图标注",
              url: "http://t0.tianditu.com/DataServer?T=cva_w&tk=4697d231b5655bf4aa67a04221da58d9&x={x}&y={y}&l={z}",
              attributions: "天地图的属性描述",
              wrapX: true
            }),
            preload: Infinity
          }),*/
        ],
        target: "map",
        view: new View({
          center: [118.103,24.5274],
          zoom: 12,
          projection: "EPSG:4326"
        }),

        //鹰眼控件
        controls: defaultControls({zoom:true}).extend([
            new OverviewMap({
              layers:[
                  new TileLayer({
                    source:new OSM()
                  })
              ],
              target:'overViewMap'
            }),
          new ScaleLine({
            units: 'metric',
          }),
          new MousePosition({
            target: "mouse-position"
          }),

        ])
      });
     /*  this.changeMapColor();*/
       console.log("init finished");
    },

    /*将天地图颜色改变*/
    changeMapColor: function (){
      let layerOrigin = new TileLayer({
        title: "天地图",
        source: new XYZ({
          name: "天地图",
          url: "http://t0.tianditu.com/DataServer?T=vec_w&tk=4697d231b5655bf4aa67a04221da58d9&x={x}&y={y}&l={z}",
        }),
      })
      console.log('1')

        //openlayer 像素转换类，可以直接当做source使用
        this.raster= new RasterSource({
          sources: [
            //传入图层，这里是天地图矢量图或者天地图矢量注记
            layerOrigin,
          ],
          //这里设置为image类型，与官方示例不同，优化速度
          operationType: 'image',
          operation: function (pixels, data) {
            //执行颜色转换方法，注意，这里的方法需要使用lib引入进来才可以使用
            //蓝色
            console.log(pixels[0].data)
            for (var i = 0; i < pixels[0].data.length; i += 4) {
              var r = pixels[0].data[i];
              var g = pixels[0].data[i + 1];
              var b = pixels[0].data[i + 2];
              //运用图像学公式，设置灰度值
              var grey = r * 0.3 + g * 0.59 + b * 0.11;
              //将rgb的值替换为灰度值
              pixels[0].data[i] = grey;
              pixels[0].data[i + 1] = grey;
              pixels[0].data[i + 2] = grey;

              //基于灰色，设置为蓝色，这几个数值是我自己试出来的，可以根据需求调整
              pixels[0].data[i] = 55 - pixels[0].data[i];
              pixels[0].data[i + 1] = 255 - pixels[0].data[i + 1];
              pixels[0].data[i + 2] = 305 - pixels[0].data[i + 2];
            }
            return pixels[0];
          },
          //线程数量
          threads: 10,
        }),
        //创建新图层，注意，必须使用 ImageLayer
        this.layer = new ImageLayer({
          title: "天地图",
          source: this.raster
        })
        //添加到地图
        this.$store.state.map.addLayer(this.layer)
      }
   }
}




</script>

<style>
.map {
  width: 100%;
  height: 99.999%;
  position:absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  top:0;
}
#overViewMap{
  position: absolute;
  z-index: 1;
  bottom: 40px;
  font-family: "微软雅黑", serif;
  font-weight: bolder;
  font-size: medium;
}
/*坐标显示*/
#mouse-position{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 30px;
  bottom: 20px;
  right: 30px;
  font-family: "微软雅黑", serif;
  font-weight: bolder;
  font-size: medium;
}
</style>
